<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业01</title>
</head>
<style>
    .title {
        display: inline-block;
        text-align: right;
        width: 80px;
    }

    .btn {
        border: 1px solid #333;
        width: 60px;
        height: 30px;
        background-color: #eee;
        cursor: pointer;
        margin: 10px;
    }

</style>

<body>
    <form action="#" onsubmit="return submitForm()">
        <p>
        <span class="title">用户名：</span>
        <!-- 给用户名的input添加unblur事件，当焦点移除时进行验证 -->
        <span><input type="text" id="username" onblur="checkUsername(this)" autofocus="autofocus" /></span>
        </p>
        <p>
        <span class="title">密码：</span>
        <span><input type="password" id="password"></span>
        </p>
        <p>
        <span class="title">性别：</span>
        <span>
            <input type="radio" name="sex" value="0" checked>男
            <input type="radio" name="sex" value="1">女
        </span>
        </p>
        <p>
        <span class="title">学历：</span>
        <span>
            <select>
                <option value="专科">专科</option>
                <option value="本科">本科</option>
            </select>
        </span>
        </p>
        <p style="line-height: 50px;">
        <span class="title">自我介绍：</span>
        <span>
            <textarea id="introduceTxt" style="width: 200px;height:100px;"></textarea>
        </span>
        </p>
        <p>
        <div style="text-align: center;width: 280px;">
            <button class="btn">提交</button>
            <input class="btn" type="reset" value="重置">
        </div>
        </p>
    </form>

    <script>
        //提交后执行事件(自我介绍的内容弹框提示出来)
        function submitForm() {
            var content = document.getElementById("introduceTxt").value;
            alert(content);
            return true;
        }

        //验证用户名
        function checkUsername(o) {
            if (o.value != "admin") {
                alert("用户名错误！");
            }
        }
    </script>
</body>

</html>